import React, { Component } from 'react'
import style from "./ask.module.css"
import {withRouter,Link} from "react-router-dom"
import {ZoomInOutlined,LikeOutlined} from '@ant-design/icons';
import { declaredPredicate } from '@babel/types';
import Nav from "../nav"
import axios from  "axios"

 class ask extends Component {
    state={
        idx:0,
        list:["全部","楼盘问答","精选问答","政策问答"],
        olist:["","楼盘问答","精选问答","政策问答"],
        alist:["全部","楼盘问答","精选问答","政策问答","全部的","全部都是"],
        val:"",
        idx:0,
        bbb:[
            {
                name:"全部"
            },
            {
                name:"全部都是"
            },
            {
                name:"全部的"
            },
            {
                name:"哈哈"
            }
        ],
        data:[],
        zan:1,
        new:[],
        dianzan:false,
    }
    
    componentDidMount() {
        this.bbb()
        this.aaa()
    }
    aaa() {
    let tab = this.state.olist[this.state.idx]
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/loupan/quiz/selectQuiz1",
            method: 'post',
            data: {
                qclasses:tab
            },
            headers: headerJSON,
        }).then(res => {
            this.state.data= res.data
            this.setState({
           
               data:res.data
            })
            console.log(this.state.data,"aaa")
        })

    }
    bbb() {
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/loupan/quiz/selectQuiz",
            method: 'post',
            data: {
            },
            headers: headerJSON,
        }).then(res => {
            // this.state.data= res.data
            this.setState({
           
               data:res.data
            })
            console.log(this.state.data,"aaa")
        })

    }
    changeInput=(e)=>{
        // console.log(e.target.value)
        this.setState({
          val:e.target.value
        })
      }
      search=()=>{
        for(var j=0;j<this.state.bbb.length;j++){
            for(var i in this.state.bbb[j]){
                if(this.state.new.indexOf(this.state.bbb[j][i])<0){
                    this.state.new.push(this.state.bbb[j][i])
                }
            }
           }
                if(this.state.val!==""){
                    const aaa = this.state.new.filter(item => item.indexOf(this.state.val) >= 0)
                    console.log(aaa,"搜索")
                }
        this.setState({
        })
        this.state.val=""
      }
    render() {
        return (
            <div>
            <div>
                <div className={style.maincon}>
                <div className={style.top}>
           <span className={style.icon}> <ZoomInOutlined /></span>
                    <input  placeholder="请输入楼盘名称" onChange={ (e)=>this.changeInput(e)} value={this.state.val}/>
                    <button onClick={this.search}>提问</button>
                </div>
               <div className={style.head}>
                   {
                       this.state.list.map((item,i)=><span key={i} onClick={()=>{
                           this.state.idx=i;
                           if(i===0){
                            this.bbb()
                        }else{
                            this.aaa()
                        }
                            this.setState({})}}
                       className={this.state.idx===i?style.active:style.aaa}
                       >{item}</span>)
                   }
                  
               </div>
               {/* <Nav a={this.state.list}></Nav> */}
               <div className={style.bom}>
               {
                   this.state.data.map((item,i)=>
                   <div  className={style.acenter} key={i}>
                       <Link to={{pathName:"/askDetail",state:{id:item.qid}}}>
               <div  className={style.content}  onClick={(e)=>{
                       this.props.history.push("/askDetail")
                   }}>
               <p className={style.hhh}><span>问</span>{item.qask}</p>
               <div className={style.house}>
                  <ul className={style.aha}>
                      <li><img src={item.qimg}/></li>
                      <li className={style.manName}>{item.qname}</li>
                      <li className={style.constur}>房产顾问</li>
                  </ul>
                  <div>{!this.state.dianzan&&<LikeOutlined  onClick={(e)=>{
                      this.state.zan+=1
                      this.state.dianzan=!this.state.dianzan
                      e.stopPropagation()
                      this.setState({})
                  }}/>}
                  {this.state.dianzan&&<LikeOutlined  className={style.zan} onClick={(e)=>{
                      this.state.zan-=1
                      this.state.dianzan=!this.state.dianzan
                    //   console.log(222)
                    e.stopPropagation()
                      this.setState({})
                  }}/>}
                  有用({this.state.zan})</div>
               </div>
               <div className={style.text}>
                   <span>精华</span>
                   <div>
                       充分了解楼盘的具体位置。很多开发商都进行宣传。
                   </div>
               </div>
               </div>
               </Link>
               </div>
                   )}
               </div>
                </div>
            </div>
            </div>
        )
    }
}
export default withRouter(ask)
